<template>
	<view class="technician-info pages-technician rel" v-if="detail.id">
		<uni-nav-bar @clickLeft="$util.goUrl({ url: 1, openType: `navigateBack` })" :fixed="true" :shadow="false"
			:statusBar="true" :onlyLeft="true" :color="`#fff`" backgroundColor="none">
			<view slot="left">
				<view class="flex-center c-base radius" style="width:58rpx;height:58rpx;background:rgba(0,0,0,0.4)">
					<i class="iconfont icongengduo" style="font-size: 26rpx;transform: rotate(180deg);"></i>
				</view>
			</view>
		</uni-nav-bar>

		<!-- #ifndef H5 -->
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<view class="fill-base">
			<banner @change="goBanner" :list="detail.self_img" :margin="0" :autoplay="true"
				:indicatorActiveColor="primaryColor" :height="564" indicatorType="number" indicatorStyle="right"
				v-if="detail.self_img.length > 0">
			</banner>
			<view class="pd-lg">
				<view class="flex-between">
					<view class="f-md-title c-black text-bold " style="max-width: 320rpx;">
						<text class="mr-md">{{detail.coach_name}}</text>
						<text class="taking-order f-icontext">接单量{{detail.order_num | handleOrderNumber}}</text>
					</view>
					<view class="flex-y-center f-icontext c-caption">
						<view @tap.stop="toShield" class="flex-y-center mr-lg pr-md">
							<view class="like-label flex-center mr-sm radius"
								:style="{background:detail.is_shield?'#FF8D4C':''}">
								<i class="iconfont"
									:class="[{'iconbuxihuan c-caption':!detail.is_shield},{'iconbuxihuan-xuanzhong c-base':detail.is_shield}]"></i>
							</view>
							屏蔽
						</view>
						<view @tap.stop="toCollect" class="flex-y-center">
							<view class="like-label flex-center mr-sm radius"
								:style="{background:detail.is_collect?'#FF4C88':''}">
								<i class="iconfont"
									:class="[{'iconshoucang1 c-caption':!detail.is_collect},{'iconshoucang2 c-base':detail.is_collect}]"></i>
							</view>
							{{detail.collect_num}} 喜欢
						</view>
					</view>
				</view>
				<view class="count-list flex-center mt-lg pt-sm">
					<view class="flex-center flex-column" v-for="(item,index) in countList" :key="index">
						<view class="f-sm-title c-black text-bold">{{detail[item.key]}}</view>
						<view class="text">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="fill-base pl-lg pr-lg pb-lg mt-md">
			<view class="f-mini-title c-title text-bold pt-lg pb-lg">个人介绍</view>
			<view class="introduce-info f-desc c-title pd-lg">
				<span v-if="!detail.showText">{{detail.text.substring(0,42) + '...'}}</span>
				<view v-else>
					<text decode="emsp" style="word-break:break-all;">{{detail.text}}</text>
				</view>
				<span @tap.stop="toShowHide(-1,'showText')" class="f-caption"
					:class="[{'ml-md':!detail.showText},{'mt-md':detail.showText}]" :style="{color:primaryColor}"
					v-if="detail.have_show_text">
					{{!detail.showText?'展开':'收起'}}
					<text class="iconfont ml-sm" :class="[{'iconxia':!detail.showText},{'iconshang':detail.showText}]"
						style="font-size: 24rpx"></text>
				</span>
			</view>
		</view>

		<view class="fill-base pl-lg pr-lg mt-md">
			<view class="f-mini-title c-title text-bold pt-lg pb-lg">TA拥有的技能</view>
			<!-- <view class="flex-warp pb-sm" v-if="detail.service && detail.service.length>0">
				<view class="item-label flex-center mr-md mb-md f-desc rel" v-for="(aitem,aindex) in detail.service"
					:key="aindex">
					<view class="item-label abs" :style="{background:primaryColor}">
					</view>
					<view :style="{color:primaryColor}">{{aitem.title}}</view>
				</view>
			</view> -->
			<scroll-view scroll-y="true" style="max-height: 575px;" @scrolltolower="serviceScroll">
				<view class="flex-center skill-item b-1px-b" v-for="(item,index) in serviceList.data" :key="index">
					<image :src="item.cover" mode="aspectFill" class="item-cover radius-10"></image>
					<view class="flex-between flex-1">
						<view class="flex-1 pl-md">
							<view class="flex flex-1" style="justify-content: space-between;align-items:flex-start">
								<view class="f-mini-title max-380 ellipsis">{{item.title}}</view>
								<view class="flex-y-center">
									<i class="iconfont iconwode2 icon-font-color" style="font-size: 22rpx;"></i>
									<text class="f-icontext c-desc">{{item.total_sale}}人玩过</text>
								</view>
							</view>
							<view class="flex-y-center" style="opacity: 0;">
								<i class="iconfont iconwode2 icon-font-color" style="font-size: 22rpx;"></i>
								<text class="f-icontext c-desc">{{item.total_sale}}人玩过</text>
							</view>
							<view class="flex-y-center pt-md">
								<view class="flex-center">
									<!-- <image src="/static/images/time.png" mode="aspectFill" style="width: 30rpx;height: 30rpx;"></image> -->
									<i class="iconfont iconshijian2" :style="{color:primaryColor}"></i>
									<view class="flex-center" style="padding-left: 4rpx;">
										<text class="f-desc text-bold">{{item.time_long}}</text>
										<text class="f-icontext">分钟</text>
									</view>
								</view>
								<view class="flex-center pl-sm">
									<text style="color: rgba(255, 18, 130, 1);" class="f-caption">￥</text>
									<text style="color: rgba(255, 18, 130, 1);" class="f-mini-title text-bold">{{item.price}}</text>
								</view>
								<text class="f-icontext c-caption pl-sm" style="text-decoration: line-through">￥{{item.init_price}}</text>
							</view>
						</view>
						<view class="f-desc c-base item-btn flex-center abs mt-sm" style="right: 0;" :style="{backgroundColor:primaryColor }" @tap.stop="changeNum(1,index)">下单</view>
					</view>
				</view>
				<view class="space-lg"></view>
			</scroll-view>
			<view style="margin: 0 100rpx;" v-if="serviceList.current_page == 1&&serviceList.data.length<=0">
				<abnor></abnor>
			</view>
		</view>

		<view class="fill-base pl-lg pr-lg mt-md">
			<view class="f-mini-title c-title text-bold pt-lg pb-lg">TA的评价</view>
			<view class="list-message flex-warp pt-lg pb-lg" :class="[{'b-1px-t':index!=0}]"
				v-for="(item,index) in list.data" :key="index">
				<view class="flex-1">
					<view class="flex-between">
						<view>
							<view class="f-mini-title c-title text-bold">{{item.nickName}}</view>
							<view class="flex-warp" style="margin-top: 5rpx">
								<i class="iconfont iconpingfen1" style="font-size: 25rpx;"
									:style="{color: aindex< item.star?'#FEC922':'#EFEFEF'}" v-for="(aitem,aindex) in 5"
									:key="aindex"></i>
							</view>
						</view>
						<view class="f-icontext c-caption">{{item.create_time}}</view>
					</view>
					<view class="f-paragraph c-title mt-md">
						<view>
							<span v-if="!item.showText">{{item.text.substring(0,100) + '...'}}</span>
							<text decode="emsp" style="word-break:break-all;" v-else>{{item.text}}</text>
						</view>
						<span @tap.stop="toShowHide(index,'showText')" class="mt-md" :style="{color:primaryColor}"
							v-if="item.have_show_text">
							{{!item.showText?'展开':'收起'}}
						</span>
					</view>
					<view class="flex-warp mt-md" v-if="item.lable_text && item.lable_text.length>0">
						<view class="item-label mini flex-center mr-md mb-md f-icontext rel"
							v-for="(aitem,aindex) in item.lable_text" :key="aindex">
							<view class="item-label mini abs" :style="{background:primaryColor}">
							</view>
							<view :style="{color:primaryColor}">{{aitem}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
		</load-more>
		
		<view class="space-footer"></view>
		<!-- <view class="space-max-footer"></view>

		<fix-bottom-button @confirm="toShowPopup" :text="[{type:'confirm',text:'邀约',isAuth:true}]" bgColor="transparent">
		</fix-bottom-button> -->


		<uni-popup ref="technician_item" type="bottom">
			<view class="technician-popup fill-base">
				<view class="pd-lg flex-center">
					<image mode="aspectFill" class="item-avatar radius" :src="detail.work_img">
					</image>
					<view @tap.stop="$refs.technician_item.close()" class="flex-1 ml-md">
						<view class="flex-between">
							<view class="flex-y-baseline f-caption c-caption">
								<view class="f-title c-title text-bold mr-sm max-350 ellipsis">
									{{detail.coach_name}}
								</view>
							</view>
							<i class="iconfont icon-close"></i>
						</view>
					</view>
				</view>
				<view class="space-sm fill-body"></view>
				<scroll-view scroll-y @touchmove.stop.prevent class="list-content">
					<view class="list-item flex-center pd-lg fill-base radius-16" :class="[{'b-1px-t':index != 0}]"
						v-for="(item,index) in serviceList" :key="index">
						<image @tap.stop="goDetail(index)" mode="aspectFill" class="avatar lg radius-16"
							:src="item.cover"></image>
						<view class="flex-1 ml-md">
							<view @tap.stop="goDetail(index)" class="f-title c-title max-510 ellipsis">
								{{item.title}}
							</view>
							<view class="f-caption c-caption mt-sm mb-sm ellipsis">{{item.total_sale}}人选择</view>
							<view class="flex-between">
								<view class="flex-y-baseline f-desc c-caption max-350 ellipsis">
									<view class="text-delete mr-sm" v-if="item.init_price">¥{{item.init_price}}
									</view>
									<view class="f-title c-warning mr-sm">¥{{item.price}}</view>/
									{{item.time_long}}分钟
								</view>
								<view class="flex-warp">
									<block v-if="item.num">
										<button @tap.stop="changeNum(-1,index)" class="reduce"
											:style="{borderColor:primaryColor,color:primaryColor}"><i
												class="iconfont icon-jian-bold"></i></button>
										<button class="addreduce clear-btn">{{item.num || 0}}</button>
									</block>
									<button @tap.stop="changeNum(1,index)" class="add"
										:style="{background:primaryColor,borderColor:primaryColor}"><i
											class="iconfont icon-jia-bold"></i></button>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view style="margin: 0 100rpx;" v-if="!loading&&serviceList.length<=0">
					<abnor></abnor>
				</view>
				<view class="flex-between pd-lg b-1px-t" v-if="carList.car_count > 0">
					<view class="flex-center">合计：<view class="f-title c-warning text-bold ml-sm">¥{{carList.car_price}}
						</view>
					</view>
					<view @tap.stop="toOrder" class="order-btn flex-center f-desc c-base radius"
						:style="{background: primaryColor}">提交订单
					</view>
				</view>
				<view class="space-safe"></view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				options: {},
				countList: [{
					title: '身高',
					key: 'height'
				}, {
					title: '年龄',
					key: 'age'
				}, {
					title: '体重',
					key: 'weight'
				}, {
					title: '星座',
					key: 'constellation'
				}],
				detail: {},
				param: {
					page: 1,
					coach_id: ''
				},
				list: {
					data: []
				},
				servicePage: 1,
				loading: true,
				serviceList: {
					data: []
				},
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			userInfo: state => state.user.userInfo,
			carList: state => state.order.carList,
		}),
		filters:{
			handleOrderNumber(val){
				return val > 9999 ? ((val / 10000).toFixed(0) + 'W+') : val
			}
		},
		onLoad(options) {
			let {
				id
			} = options
			this.param.coach_id = id
			this.options = options
			this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh();
			uni.stopPullDownRefresh()
		},
		onReachBottom() {
			if (this.list.current_page >= this.list.last_page || this.loading) return;
			this.param.page = this.param.page + 1;
			this.loading = true;
			this.getList();
		},
		methods: {
			...mapActions(['getConfigInfo', 'getUserInfo', 'getCarList']),
			...mapMutations(['updateUserItem', 'updateTechnicianItem']),
			async initIndex() {
				// #ifdef H5
				if (this.$jweixin.isWechat()) {
					await this.$jweixin.initJssdk();
					this.$jweixin.wxReady(() => {
						this.$jweixin.hideOptionMenu()
					})
				}
				// #endif
				await this.getServiceList()
				await this.getDetail()
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			initRefresh() {
				this.param.page = 1
				this.servicePage = 1
				this.initIndex(true)
			},
			async getDetail() {
				let {
					id
				} = this.options
				let data = await this.$api.service.coachInfo({
					id
				});
				data.self_img = data.self_img.map(item => {
					return {
						img: item
					}
				})

				let isHaveVideo = data.video && data.video.length > 0
				data.self_img.map((item, index) => {
					item.jump_url = index == 0 && isHaveVideo ? data.video : item.img
					item.jump_type = index == 0 && isHaveVideo ? 'video' : 'picture'
				})
				let have_show_text = data.text.length > 42
				data.have_show_text = have_show_text
				data.showText = !have_show_text
				this.detail = data
				this.$util.hideAll()
			},
			async getList() {
				let {
					list: oldList,
					param,
				} = this
				let newList = await this.$api.service.commentList(param);
				newList.data.map(item => {
					let have_show_text = item.text.length > 100
					item.have_show_text = have_show_text
					item.showText = !have_show_text
				})

				if (this.param.page == 1) {
					this.list = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList
				}
				this.loading = false
				this.$util.hideAll()
			},
			goBanner(item) {
				let current = item.img
				let urls = this.detail.self_img.map(item => {
					return item.img
				})
				this.$util.previewImage({
					current,
					urls
				})
			},
			toShowHide(index, key) {
				if (index == -1) {
					this.detail[key] = !this.detail[key]
					return
				}
				this.list.data[index][key] = !this.list.data[index][key]
			},
			async toShowPopup() {
				let {
					user_id = 0,
						is_work = 0
				} = this.detail
				if (!user_id || !is_work) return
				await this.getServiceList()
				this.$refs.technician_item.open()
			},
			async getServiceList() {
				let {
					id: coach_id
				} = this.options
				
				await this.getCarList({
					coach_id
				})
				
				let oldList = this.serviceList
				let newList = await this.$api.service.coachServiceListPage({
					coach_id,
					limit: 5,
					page: this.servicePage
				})
				
				let arr = []
				if (this.carList.list && this.carList.list.length > 0) {
					this.carList.list.map(item => {
						arr.push(item.service_id)
					})
				}
				if (newList.data && newList.data.length > 0) {
					newList.data.map(item => {
						if (arr.includes(item.id)) {
							let carInd = arr.findIndex(aitem => {
								return aitem == item.id
							})
							item.num = this.carList.list[carInd].num
							item.cart_id = this.carList.list[carInd].id
						}
					})
				}
				if (this.servicePage == 1) {
					this.serviceList = newList
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.serviceList = newList
				}
				this.$util.hideAll()
				//this.serviceList = data
			},
			// 加/减数量
			async changeNum(mol, serInd) {
				let {
					id: coach_id
				} = this.options
				let {
					id: service_id,
					cart_id = 0
				} = this.serviceList.data[serInd]
				if (this.lockTap) return;
				this.lockTap = true;
				let methodModel = mol > 0 ? 'addCar' : 'delCar'
				let param = mol > 0 ? {
					service_id,
					coach_id,
					num: 1
				} : {
					id: cart_id,
					num: 1
				}
				if (methodModel == 'delCar' && !param.id) {
					this.lockTap = false
					return
				}
				try {
					let add_cart_id = await this.$api.order[methodModel](param)
					let {
						num = 0,
							cart_id = 0
					} = this.serviceList.data[serInd]
					this.serviceList.data[serInd].num = num + mol
					if (add_cart_id && mol > 0 && !cart_id) {
						this.serviceList.data[serInd].cart_id = add_cart_id
					}
					if (this.serviceList.data[serInd].num < 1) {
						this.serviceList.data[serInd].cart_id = 0
					}
					await this.getCarList({
						coach_id
					})
					this.lockTap = false
				} catch (e) {
					this.lockTap = false
				}
				this.toOrder()
			},
			// 下单
			toOrder() {
				if (this.carList.car_count < 1) {
					this.$util.showToast({
						title: `请选择服务`
					})
					return
				}
				let {
					id
				} = this.options
				this.$refs.technician_item.close()
				this.$util.goUrl({
					url: `/user/pages/order?id=${id}`
				})
			},
			async toShield() {
				let {
					id
				} = this.options
				await this.$api.mine.shieldCoachAdd({
					type: 2,
					coach_id: id
				})
				this.updateUserItem({
					key: 'haveShieldOper',
					val: 2
				})
				this.$util.back()
				setTimeout(() => {
					this.$util.goUrl({
						url: 1,
						openType: `navigateBack`

					})
				}, 1000)
			},
			async toCollect() {
				let {
					id,
					is_collect,
					collect_num
				} = this.detail
				let methodModel = is_collect ? 'delCollect' : 'addCollect'
				await this.$api.mine[methodModel]({
					coach_id: id
				})
				this.$util.showToast({
					title: is_collect ? '取消成功' : '收藏成功'
				})
				this.detail.is_collect = is_collect == 1 ? 0 : 1
				this.detail.collect_num = is_collect == 1 ? collect_num - 1 :
					collect_num + 1
			},
			onPlay(e) {},
			onPause(e) {},
			onWaiting(e) {},
			onProgress(e) {},
			onLoadedMetaData(e) {},
			serviceScroll(e){
				if (this.serviceList.current_page >= this.serviceList.last_page || this.serviceList.data.length >= this.serviceList.total) return;
				this.servicePage = this.servicePage + 1;
				this.$util.showLoading()
				this.getServiceList();
			}
		}
	}
</script>


<style lang="scss">
	.technician-info {
		.like-label {
			width: 42rpx;
			height: 42rpx;
			background: #EFEFEF;

			.iconfont {
				font-size: 24rpx;
				margin-top: 5rpx;
			}
		}

		.count-list {
			.flex-column {
				width: 25%;

				.text {
					font-size: 20rpx;
					color: #B1B1B1;
					margin-top: 5rpx;
				}
			}
		}

		.introduce-info {
			width: 690rpx;
			background: #F7F8FA;
			border-radius: 12rpx;
		}

		.item-label {
			min-width: 168rpx;
			height: 68rpx;
			padding: 0 20rpx;
			color: #fff;
			background: #F6F7F8;
			border-radius: 34rpx;
		}

		.item-label.mini {
			min-width: 120rpx;
			height: 48rpx;
		}

		.item-label.abs {
			opacity: 0.1;
			border-radius: 34rpx;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 1;
		}

		.list-message {
			.item-avatar {
				width: 52rpx;
				height: 52rpx;
				background: #f4f6f8;
			}

			.iconfont {
				font-size: 28rpx;
				margin-right: 5rpx;
			}
		}

	}
	.taking-order{
		color: #FF8D4C;
		background-color: #FDF1EB;
		padding: 2px 4px;
		font-weight: normal;
	}
	.skill-item{
		padding: 40rpx 0;
		.item-cover{
			width: 150rpx;
			height: 150rpx;
		}
		.iconwode2{
			background-image: linear-gradient(#9FA4B6,#BFC5CF);
		}
		.item-btn{
			width: 120rpx;
			height: 60rpx;
			border-radius: 60rpx;
		}
	}
</style>
